<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一人一骑</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <h1 class="game-title">一人一骑，横扫千军</h1>
        
        <div class="game-header">
            <div class="score-container">
                <span>分数: </span>
                <span id="score">0</span>
            </div>
            <div class="total-score-container">
                <span>总分: </span>
                <span id="total-score">0</span>
            </div>
            <div class="high-score-container">
                <span>最高分: </span>
                <span id="high-score">0</span>
            </div>
            <div class="round-container">
                <span>回合: </span>
                <span id="round">1</span>
            </div>
        </div>
        
        <div class="game-instructions">
            <p>点击你的棋子（红色）选中它，然后点击高亮的方格移动。</p>
            <p>吃掉敌方棋子（蓝色）来获得分数。每4回合会出现3个新的敌方棋子！</p>
        </div>
        
        <div class="game-board" id="game-board">
            <!-- 游戏棋盘将由JavaScript生成 -->
        </div>
        
        <div class="piece-legend">
            <h3>棋子分值</h3>
            <div class="legend-items">
                <div class="legend-item">
                    <div class="legend-piece pawn">卒</div>
                    <span>10 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece advisor">士</div>
                    <span>10 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece knight">马</div>
                    <span>15 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece elephant">象</div>
                    <span>15 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece rook">车</div>
                    <span>30 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece cannon">炮</div>
                    <span>30 分</span>
                </div>
                <div class="legend-item">
                    <div class="legend-piece general">将</div>
                    <span>100 分</span>
                </div>
            </div>
        </div>

        <div class="game-controls">
            <button id="start-button">开始新游戏</button>
            <button id="shop-button">商店</button>
            <button id="assist-button">辅助: 关</button>
            <button id="sound-toggle" class="sound-on">🔊</button>
        </div>
        
        <div id="shop" class="shop hidden">
            <div class="shop-content" id="shop-content">
                <!-- 商店内容将由JavaScript生成 -->
            </div>
        </div>
        
        <div id="game-over" class="game-over hidden">
            <div class="game-over-content">
                <button id="close-game-over" class="close-button">&times;</button>
                <h2>游戏结束</h2>
                <p id="final-score">你的分数: 0</p>
                <div id="defeat-info" class="defeat-info">
                    <p>你被以下棋子击败:</p>
                    <div id="defeating-piece" class="defeating-piece"></div>
                </div>
                <p id="message"></p>
                <button id="restart-button">再次游戏</button>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>